<template>
  <div>
    <el-input v-model="fileUrl" placeholder="Enter file URL" style="width: 300px; margin-right: 10px;"></el-input>
    <el-button type="primary" @click="previewFile">Preview File</el-button>

    <!-- Modal for file preview -->
    <el-dialog
      :visible.sync="showPreview"
      width="80%"
      :before-close="closePreview">
      <span slot="title">File Preview</span>
      <iframe :src="previewUrl" style="width: 100%; height: 400px; border: none;"></iframe>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileUrl: '',
      showPreview: false,
      previewUrl: ''
    };
  },
  methods: {
    previewFile() {
      if (this.fileUrl) {
        const encodedUrl = this.base64Encode(this.fileUrl);
        this.previewUrl = `http://192.168.20.6:58012/onlinePreview?url=${encodeURIComponent(encodedUrl)}`;
        this.showPreview = true;
      } else {
        this.$message.error('Please enter a valid URL.');
      }
    },
    closePreview() {
      this.showPreview = false;
    },
    base64Encode(str) {
      return btoa(unescape(encodeURIComponent(str)));
    }
  }
};
</script>

<style scoped>
/* Additional styles are not necessary if using Element UI's default styles */
</style>
